<template>
	<view>
		<view class="bg-blue font-big text-white d-flex a-center header px-2 j-sb">
			<view>{{ device.name }}</view>
			<view class="d-flex">
				<navigator url="/pages/home/home">
					<button type="warn">首页</button>
				</navigator>
				<view class="ml">
					<button>退出</button>
				</view>
			</view>
		</view>
		<view class="main d-flex">
			<view class="pt pr pb flex-1 d-flex">
				<view class="left border bg-white">
					<view
						@click="onSelectMenu = item"
						v-for="item in menus"
						:key="item.code"
						:class="{ 'bg-blue text-white': item.code == onSelectMenu.code }"
						class="item d-flex a-center j-center font-md"
					>
						{{ item.name }}
					</view>
				</view>
				<view class="pl d-flex w-100">
					<view class="border flex-1 right bg-white">
						<view class="p-2">

							<XwlDevice ref="xwlDeviceRef" v-if="onSelectMenu.code == 'device'"></XwlDevice>
							<XwlBox v-if="onSelectMenu.code == 'box'"></XwlBox>
							<XwlClass v-if="onSelectMenu.code == 'class'"></XwlClass>
							<XwlGoods v-if="onSelectMenu.code == 'goods'"></XwlGoods>
							<XwlDep v-if="onSelectMenu.code == 'dep'"></XwlDep>
							<XwlUser v-if="onSelectMenu.code == 'user'"></XwlUser>
							<XwlLog v-if="onSelectMenu.code == 'log'"></XwlLog>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
import { ref } from 'vue';
import XwlDevice from '@/components/admin/xwl-device.vue';
import XwlBox from '@/components/admin/xwl-box.vue';
import XwlClass from '@/components/admin/xwl-class.vue';
import XwlGoods from '@/components/admin/xwl-goods.vue';
import XwlDep from '@/components/admin/xwl-dep.vue';
import XwlUser from '@/components/admin/xwl-user.vue';
import XwlLog from '@/components/admin/xwl-log.vue';
import { useStore } from '@/store/index.js';
const store = useStore();
const device = store.deviceStore.data;

const xwlDeviceRef = ref(null);
const menus = ref([
	{
		name: '数据情况',
		code: 'data'
	},
	{
		name: '柜机信息',
		code: 'device'
	},
	{
		name: '箱格信息',
		code: 'box'
	},
	{
		name: '物品分类',
		code: 'class'
	},
	{
		name: '物品管理',
		code: 'goods'
	},

	{
		name: '部门管理',
		code: 'dep'
	},
	{
		name: '用户管理',
		code: 'user'
	},{
		name: '存取记录',
		code: 'log'
	}

]);
const onSelectMenu = ref({ name: '数据情况', code: 'data' });
</script>

<style lang="scss" scoped>
.header {
	height: 15vh;
}
.main {
	height: 85vh;

	.left {
		width: 25vw;
		border: 1px solid #ccc;
		box-shadow: 0 0 10px #ccc;
		.item {
			height: 30rpx;
			border-bottom: 1px solid #ccc;
		}
	}
	.right {
		width: 100%;
		box-shadow: 0 0 10px #ccc;
	}
}
</style>
